    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>突出显示案例</title>
    </head>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        body{
            background: black;
        }
        .box{
            padding: 5px;
            height: 630px;
            width: 635px;
            border: 1px solid #2b0ccc;
            margin: 100px auto;
        }
        .box div{
            width: 200px;
            height: 300px;
            margin: 5px;
            /*border: 2px solid #fff313;*/
            float: left;
        }
        .box div img{
            width: 190px;
            height: 290px;
            opacity: 1;
        }
    </style>
    <body>
    <div class="box">
        <div class="faceBox"><img src="faceImg/1.jpg" alt=""></div>
        <div class="faceBox"><img src="faceImg/2.jpg" alt=""></div>
        <div class="faceBox"><img src="faceImg/3.jpg" alt=""></div>
        <div class="faceBox"><img src="faceImg/4.jpg" alt=""></div>
        <div class="faceBox"><img src="faceImg/5.jpg" alt=""></div>
        <div class="faceBox"><img src="faceImg/6.jpg" alt=""></div>
    </div>
    <script>
        $(function () {
                var boxb=$('.box').find('div');
            boxb.mouseenter(function () {
                    $(this).css({'opacity':1}).siblings('div').css({'opacity':.4});
            });
                boxb.mouseleave(function () {
                $(boxb).css({'opacity':1});
            })
        })
    </script>
    </body>
    </html>